<template>
  <div class="pagebody">
    <!-- <StickHead></StickHead> -->
    <div class="banner flex-row justify-center align-center">
      <img src="@/static/img/banner.png" alt="" />
    </div>
    <div class="user pos-rel borderbox">
      <div
        class="userbox pos-abs borderbox bgfff flex-row align-center justify-start"
      >
        <img class="headimg" src="@/static/img/headimg.png" alt="" />
        <div class="fz28">{{ this.nickName }}</div>
      </div>
    </div>
    <div
      class="funbox flex-row justify-between flex-wrap borderbox bgfff"
      v-if="qyFlag"
    >
      <img @click="toProblem()" src="@/static/img/problem.png" alt="" />
      <img @click="toComplain()" src="@/static/img/complain.png" alt="" />
    </div>
    <div class="bossfunbox bgfff borderbox" v-if="zwFlag">
      <div class="bosstitle flex-row fz32 fwbold align-center">
        <div class="beforeclip"></div>
        问题管理
      </div>
      <div class="flex-row mt15 justify-around flex-wrap borderbox bgfff">
        <div class="bossitembox mt16" @click="toAgency()">
          <img src="@/static/img/wddb.png" alt="" />
          <div class="fz24 text-al-center">我的待办</div>
        </div>
        <div class="bossitembox mt16" @click="toCompleted()">
          <img src="@/static/img/wdyb.png" alt="" />
          <div class="fz24 text-al-center">我的已办</div>
        </div>
        <div class="bossitembox mt16" @click="toAllorder()">
          <img src="@/static/img/qbgd.png" alt="" />
          <div class="fz24 text-al-center">全部工单</div>
        </div>
      </div>
    </div>
    <StickFoot :type="'index'"></StickFoot>
  </div>
</template>
<script src="https://www.zwfw.hlj.gov.cn/jmopenpub/jmopen_files/js/jssdk/index.js"></script>
<!-- <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script> -->
<script>
import StickHead from "@/layout/StickHead.vue";
import { Toast } from "vant";
import StickFoot from "@/layout/StickFoot.vue";
import { getInfo } from "@/api/api";
// import VConsole from "vconsole";
import getUser from "@/api/getUserInfo1";

export default {
  name: "index",
  components: {
    StickHead,
    StickFoot,
  },
  data() {
    return {
      nickName: "",
      roles: [],
      qyFlag: false,
      zwFlag: false,
      token: null,
    };
  },
  // created() {},
  async mounted() {
    // const vConsole = new VConsole();

    await this.gettoken();

    // vConsole.destroy();
  },
  methods: {
    async gettoken() {
      this.token = window.localStorage.getItem("token");
      if (this.token) {
        let obj = {
          token: this.token,
        };
        window.localStorage.setItem("user", JSON.stringify(obj));

        getInfo().then((res) => {
          let obj = {
            nickName: res.data.user.nickName,
            userId: res.data.user.userId,
            phonenumber: res.data.user.phonenumber,
            roles: res.data.roles,
          };

          this.nickName = res.data.user.nickName;
          this.roles = res.data.roles;
          this.qyFlag =
            this.roles.includes("qy") || this.roles.includes("admin");
          this.zwFlag =
            this.roles.includes("zw") || this.roles.includes("admin");
          window.localStorage.setItem("userinfo", JSON.stringify(obj));
        });
      } else if (window.localStorage.getItem("user")) {
        getInfo().then((res) => {
          let obj = {
            nickName: res.data.user.nickName,
            userId: res.data.user.userId,
            phonenumber: res.data.user.phonenumber,
            roles: res.data.roles,
          };
          (this.nickName = res.data.user.nickName),
            (this.roles = res.data.roles),
            (this.qyFlag =
              this.roles.includes("qy") || this.roles.includes("admin"));
          this.zwFlag =
            this.roles.includes("zw") || this.roles.includes("admin");
          window.localStorage.setItem("userinfo", JSON.stringify(obj));
        });
      } else {
        console.log("拉起登录1");
        getUser.onLoginApp();
      }
    },
    getHashIdValue() {
      var url = document.location.toString();
      // 如果url中有特殊字符则需要进行一下解码
      url = decodeURI(url);
      let trueurl = url.substring(0, url.length - 2);
      var arr1 = trueurl.split("?");
      var obj = {};
      if (arr1.length > 1) {
        var arr2 = arr1[1].split("&");
        for (var i = 0; i < arr2.length; i++) {
          var curArr = arr2[i].split("=");
          obj[curArr[0]] = decodeURIComponent(curArr[1]);
        }
      }
      return obj;
    },
    toProblem() {
      this.$router.push({ name: "problem" });
    },
    toComplain() {
      this.$router.push({ name: "complain" });
    },
    toAgency() {
      this.$router.push({ name: "agency", query: { flag: 0 } });
    },
    toCompleted() {
      this.$router.push({ name: "completed", query: { flag: 1 } });
    },
    toAllorder() {
      this.$router.push({ name: "allorder", query: { flag: 2 } });
    },
  },
};
</script>

<style lang="scss" scoped>
.pagebody {
  padding-bottom: 1rem;

  .banner {
    img {
      width: 100%;
    }
  }

  .user {
    height: 1rem;
    background: #f6f8fb;

    .userbox {
      padding: 0 0.44rem;
      border-radius: 0.1rem;
      top: -0.6rem;
      width: 90%;
      left: 0.24rem;
      height: 1.2rem;

      .headimg {
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background: skyblue;
        margin-right: 0.16rem;
      }
    }
  }

  .funbox {
    padding: 0.36rem;

    img {
      width: 3rem;
    }
  }

  .bossfunbox {
    padding: 0.36rem;

    .bosstitle {
      position: relative;
      line-height: 0.6rem;
      height: 0.6rem;

      .beforeclip {
        margin-right: 0.1rem;
        line-height: 0.6rem;
        width: 0.16rem;
        border-radius: 0.08rem;
        height: 0.5rem;
        background: #2b98be;
      }
    }

    .bossitembox {
      img {
        width: 1rem;
      }
    }
  }
}
</style>